<template>
  <div class="environment-info">
    <el-card>
      <template #header>
        <span>环境信息</span>
      </template>
      
      <el-descriptions :column="1" border>
        <el-descriptions-item label="应用标题">
          {{ appTitle }}
        </el-descriptions-item>
        <el-descriptions-item label="运行环境">
          <el-tag :type="environmentType">
            {{ appEnv }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="API 地址">
          <el-link 
            v-if="apiUrl" 
            :href="apiUrl" 
            target="_blank"
            type="primary"
          >
            {{ apiUrl }}
          </el-link>
          <span v-else>
            使用当前域名
            <el-tag type="info" size="small">自动</el-tag>
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="开发模式">
          <el-tag :type="isDevelopment ? 'success' : 'info'">
            {{ isDevelopment ? '是' : '否' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="生产模式">
          <el-tag :type="isProduction ? 'danger' : 'info'">
            {{ isProduction ? '是' : '否' }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useEnvironment } from '@/utils/environment';

const { 
  isDevelopment, 
  isProduction, 
  apiUrl, 
  appTitle, 
  appEnv 
} = useEnvironment();

const environmentType = computed(() => {
  switch (appEnv) {
    case 'development':
      return 'success';
    case 'test':
      return 'warning';
    case 'production':
      return 'danger';
    default:
      return 'info';
  }
});
</script>

<style lang="scss" scoped>
.environment-info {
  max-width: 600px;
  margin: 20px auto;
  
  :deep(.el-descriptions__label) {
    font-weight: 500;
  }
}
</style>